<template>
  <div class="session-item-style">
    <div class="top-item-group">
      <div class="top-session-title">{{currentSession.visiterName}}</div>
      <div class="top-button-group">
        <el-link @click="addDialogVisible=true" :underline="false">
          <div class="top-button-style">
            <i class="iconfont button-icon-style">&#xe7b0;</i>
            <div style="display: inline-block">创建工单</div>
          </div>
        </el-link>
        <el-link @click="transferDialogVisible=true" :underline="false">
          <div class="top-button-style">
            <i class="iconfont button-icon-style">&#xe75f;</i>
            <div style="display: inline-block">转接</div>
          </div>
        </el-link>
        <el-link @click="blackDialogVisible=true" :underline="false">
          <div class="top-button-style">
            <i class="iconfont button-icon-style">&#xe75a;</i>
            <div style="display: inline-block">拉黑</div>
          </div>
        </el-link>
        <el-link @click="closeSession" :underline="false">
          <div class="top-button-style">
            <i class="iconfont button-icon-style">&#xe747;</i>
            <div style="display: inline-block">结束会话</div>
          </div>
        </el-link>
      </div>
    </div>
    <div class="bottom-item-group">
      <div class="left-msg-group">
        <div class="left-top-group" id="dialogContainer" v-loading="isLoading">
          <SessionDialog :messages="messageList" :type="'cs'" :currentSession="currentSession"></SessionDialog>
        </div>
        <div class="left-bottom-group">
          <div class="left-bottom-item">
            <i class="iconfont bottom-item-style">&#xe766;</i>
            <i class="iconfont bottom-item-style">&#xe764;</i>
          </div>
          <div class="left-bottom-textarea">
            <textarea
              v-model="msgContent"
              autocomplete="off"
              rows="4"
              placeholder
              maxlength="200"
              class="el-textarea__inner"
              style="max-height: 95px;min-height: 50px;"
            ></textarea>
          </div>
          <div class="left-bottom-send">
            <el-button @click="handleSendMessage" type="primary" size="medium">发&nbsp;&nbsp;&nbsp;送</el-button>
          </div>
        </div>
      </div>
      <div class="right-info-group">
        <el-tabs style="width: 20vw;" v-model="activeName" stretch>
          <el-tab-pane label="资料" name="1">
            <div class="info-item-group">
              <div style="padding-bottom:15px;border-bottom: 1px solid #e4e7ed;">
                <div class="info-title">访客信息</div>
                <div class="visitor-info">
                  <div class="info-item">
                    <span class="info-label">来源</span>
                    {{currentVisitor.terminal}}
                  </div>
                  <div class="info-item">
                    <span class="info-label">IP地址</span>
                    {{currentVisitor.ip}}
                  </div>
                  <div class="info-item">
                    <span class="info-label">浏览器</span>
                    {{currentVisitor.browser}}
                  </div>
                  <div class="info-item">
                    <span class="info-label">屏幕尺寸</span>
                    {{currentVisitor.screenSize}}
                  </div>
                  <div class="info-item">
                    <span class="info-label">设备</span>
                    {{currentVisitor.device}}
                  </div>
                </div>
              </div>
              <div class="info-bottom-group">
                <div class="info-title">
                  <span>客户信息</span>
                  <el-link
                    @click="putDialogVisible=true"
                    :underline="false"
                    style="color: #409eff;"
                    icon="el-icon-edit"
                  >编辑</el-link>
                </div>
                <div class="customer-info">
                  <div class="info-item">
                    <span class="info-label">客户名称</span>
                    北京市客户
                  </div>
                  <div class="info-item">
                    <span class="info-label">真实姓名</span>
                    王伟
                  </div>
                  <div class="info-item">
                    <span class="info-label">客户电话</span>
                    —
                  </div>
                  <div class="info-item">
                    <span class="info-label">客户邮箱</span>
                    —
                  </div>
                  <div class="info-item">
                    <span class="info-label">客户公司</span>
                    —
                  </div>
                  <div class="info-item">
                    <span class="info-label">客户地址</span>
                    —
                  </div>
                  <div class="info-item">
                    <span class="info-label">客户等级</span>
                    普通客户
                  </div>
                  <div class="info-item">
                    <span class="info-label">客户来源</span>
                    访客转化
                  </div>
                  <div class="info-item">
                    <span class="info-label">客户备注</span>
                    —
                  </div>
                  <div class="info-item">
                    <span class="info-label">客户标签</span>
                    <el-tag type="success">已上市</el-tag>
                    <el-tag type="success">潜在客户</el-tag>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="常用语" name="2">
            <div class="common-word-group">
              <div class="word-button-group">
                <el-button
                  :plain="!isPersonal"
                  @click="isPersonal = !isPersonal"
                  type="primary"
                  size="mini"
                  round
                >个人库</el-button>
                <el-button
                  :plain="isPersonal"
                  @click="isPersonal = !isPersonal"
                  type="primary"
                  size="mini"
                  round
                >公共库</el-button>
              </div>
              <div class="word-search-group">
                <el-input
                  style="height:40px"
                  placeholder="搜索常用语"
                  v-model="keyword"
                  class="input-with-select"
                >
                  <el-button slot="append" size="small" icon="el-icon-search"></el-button>
                </el-input>
              </div>
              <div v-if="isPersonal" class="bottom-personal-group">
                <el-collapse v-model="personalCollapse" accordion>
                  <el-collapse-item title="我的常用语分类一" name="1">
                    <div>您好，请问有什么可以帮您？</div>
                    <div>您好，请问有什么可以帮您？</div>
                    <div>您好，请问有什么可以帮您？</div>
                  </el-collapse-item>
                  <el-collapse-item title="我的常用语分类二" name="2">
                    <div>您好，请问有什么可以帮您？</div>
                    <div>您好，请问有什么可以帮您？</div>
                    <div>您好，请问有什么可以帮您？</div>
                  </el-collapse-item>
                </el-collapse>
              </div>
              <div v-else class="bottom-public-group">
                <el-collapse v-model="publicCollapse" accordion>
                  <el-collapse-item title="公共常用语分类一" name="1">
                    <div>您好，请问有什么可以帮您？</div>
                    <div>您好，请问有什么可以帮您？</div>
                    <div>您好，请问有什么可以帮您？</div>
                  </el-collapse-item>
                  <el-collapse-item title="公共常用语分类二" name="2">
                    <div>您好，请问有什么可以帮您？</div>
                    <div>您好，请问有什么可以帮您？</div>
                    <div>您好，请问有什么可以帮您？</div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="历史工单" name="3">
            <div class="history-order-group">
              <div class="info-title">工单信息</div>
              <div class="visitor-info">
                <div class="info-item">
                  <span class="info-label">工单标题</span>
                  分类一
                </div>
                <div class="info-item">
                  <span class="info-label">工单描述</span>
                  客户需要某某某
                </div>
                <div class="info-item">
                  <span class="info-label">工单分类</span>
                  分类一
                </div>
                <div class="info-item">
                  <span class="info-label">抄送人</span>
                  王涛，吴敏儿
                </div>
                <div class="info-item">
                  <span class="info-label">优先级</span>
                  低
                </div>
                <div class="info-item">
                  <span class="info-label">工单状态</span>
                  处理中
                </div>
                <div class="info-item">
                  <span class="info-label">受理客服组</span>
                  客服组一
                </div>
                <div class="info-item">
                  <span class="info-label">受理客户</span>
                  王先生
                </div>
                <div class="info-item">
                  <span class="info-label">创建时间</span>
                  2020/06/09 20:09
                </div>
                <div class="info-item">
                  <span class="info-label">更新时间</span>
                  2020/06/09 20:09
                </div>
              </div>
              <div class="bottom-link-group">
                <el-link
                  :underline="false"
                  style="float:right;color: #409eff;"
                  @click.native.prevent="getDetail()"
                >
                  查看工单详情
                  <i class="el-icon-caret-right"></i>
                </el-link>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-dialog title="编辑客户信息" top="9vh" :visible.sync="putDialogVisible" width="33%">
      <div class="add-dialog-style">
        <div style="padding-bottom:20px;color:#a2a2a2;font-size:13px">更多客户字段可在设置中进行配置</div>
        <el-form ref="putOrderForm" :model="putOrderForm" label-position="left" label-width="120px">
          <el-form-item :rules="{ required: true, message: '请输入客户名称'}" label="客户名称">
            <el-input style="width:100%;" v-model="putOrderForm.name1" placeholder="请输入客户名称"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input style="width:100%;" v-model="putOrderForm.name2" placeholder="请输入客户真实姓名"></el-input>
          </el-form-item>
          <el-form-item label="客户电话">
            <el-input style="width:100%;" v-model="putOrderForm.name3" placeholder="请输入客户客户电话"></el-input>
          </el-form-item>
          <el-form-item label="客户邮箱">
            <el-input style="width:100%;" v-model="putOrderForm.name4" placeholder="请输入客户客户邮箱"></el-input>
          </el-form-item>
          <el-form-item label="客户公司">
            <el-input style="width:100%;" v-model="putOrderForm.name5" placeholder="请输入客户客户公司"></el-input>
          </el-form-item>
          <el-form-item label="客户地址">
            <el-input style="width:100%;" v-model="putOrderForm.name6" placeholder="请输入客户客户地址"></el-input>
          </el-form-item>
          <el-form-item label="客户等级">
            <el-select style="width:100%;" v-model="putOrderForm.name7" placeholder="请选择客户等级">
              <el-option label="普通客户" value="option1"></el-option>
              <el-option label="VIP客户" value="option2"></el-option>
              <el-option label="潜在客户" value="option3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户来源">
            <el-select style="width:100%;" v-model="putOrderForm.name8" placeholder="请选择客户来源">
              <el-option label="客服录入" value="option1"></el-option>
              <el-option label="网页介入" value="option2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动性质">
            <el-checkbox-group v-model="putOrderForm.name9">
              <el-checkbox label="潜在客户" name="type"></el-checkbox>
              <el-checkbox label="上市公司" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="客户备注">
            <el-input type="textarea" :rows="6" v-model="putOrderForm.name10" placeholder="请输入客户备注"></el-input>
          </el-form-item>
          <!-- <el-form-item>
          <el-button>取消</el-button>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          </el-form-item>-->
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="handleClean" type="text" size="normal">清空</el-button>
        <el-button @click="putDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="putDialogVisible = false">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新建工单" top="9vh" :visible.sync="addDialogVisible" width="33%">
      <div class="add-dialog-style">
        <el-form ref="addOrderForm" :model="addOrderForm" label-position="left" label-width="120px">
          <el-form-item :rules="{ required: true, message: '请选择工单分类'}" label="工单分类">
            <el-select style="width:100%;" v-model="addOrderForm.name1" placeholder="请选择">
              <el-option label="分类一" value="option1"></el-option>
              <el-option label="分类二" value="option2"></el-option>
              <el-option label="分类三" value="option3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :rules="{ required: true, message: '请输入工单标题'}" label="工单标题">
            <el-input style="width:100%;" v-model="addOrderForm.name2" placeholder="请输入工单标题"></el-input>
          </el-form-item>
          <el-form-item :rules="{ required: true, message: '请输入工单描述'}" label="工单描述">
            <el-input type="textarea" :rows="6" v-model="addOrderForm.name3" placeholder="请输入工单描述"></el-input>
          </el-form-item>
          <el-form-item label="抄送人">
            <el-select style="width:100%;" v-model="addOrderForm.name4" placeholder="请选择">
              <el-option label="王美美" value="option1"></el-option>
              <el-option label="七尾" value="option2"></el-option>
              <el-option label="李想" value="option3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="优先级">
            <el-radio-group v-model="addOrderForm.name5">
              <el-radio label="低"></el-radio>
              <el-radio label="中"></el-radio>
              <el-radio label="高"></el-radio>
              <el-radio label="紧急"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="工单状态">
            <el-select style="width:100%;" v-model="addOrderForm.name6" placeholder="请选择">
              <el-option label="未分配" value="option1"></el-option>
              <el-option label="待处理" value="option2"></el-option>
              <el-option label="处理中" value="option3"></el-option>
              <el-option label="已解决" value="option4"></el-option>
              <el-option label="已关闭" value="option5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="受理客服组">
            <el-select style="width:100%;" v-model="addOrderForm.name7" placeholder="请选择">
              <el-option label="客服组一" value="option1"></el-option>
              <el-option label="客服组二" value="option2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="受理客服">
            <el-select style="width:100%;" v-model="addOrderForm.name8" placeholder="请选择">
              <el-option label="王美美" value="option1"></el-option>
              <el-option label="七尾" value="option2"></el-option>
              <el-option label="李想" value="option3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属客户">
            <el-select style="width:100%;" v-model="addOrderForm.name9" placeholder="请选择">
              <el-option label="王美美" value="option1"></el-option>
              <el-option label="七尾" value="option2"></el-option>
              <el-option label="李想" value="option3"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
          <el-button>取消</el-button>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          </el-form-item>-->
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="handleClean" type="text" size="normal">清空</el-button>
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialogVisible = false">创建工单</el-button>
      </div>
    </el-dialog>
    <el-dialog title="转接" top="20vh" :visible.sync="transferDialogVisible" width="33%">
      <div class="transfer-dialog-style">
        <el-form
          ref="transferOrderForm"
          :model="transferOrderForm"
          label-position="left"
          label-width="120px"
        >
          <el-form-item label="受理客服组">
            <el-select style="width:100%;" v-model="transferOrderForm.name1" placeholder="请选择">
              <el-option label="客服组一" value="option1"></el-option>
              <el-option label="客服组二" value="option2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="受理客服">
            <el-select style="width:100%;" v-model="transferOrderForm.name2" placeholder="请选择">
              <el-option label="王美美" value="option1"></el-option>
              <el-option label="七尾" value="option2"></el-option>
              <el-option label="李想" value="option3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="处理备注">
            <el-input
              type="textarea"
              :rows="6"
              v-model="transferOrderForm.name3"
              placeholder="请输入处理备注"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item>
          <el-button>取消</el-button>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          </el-form-item>-->
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="handleClean" type="text" size="normal">清空</el-button>
        <el-button @click="transferDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="transferDialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="拉黑客户" top="27vh" :visible.sync="blackDialogVisible" width="33%">
      <div class="black-dialog-style">
        <el-form
          ref="blackOrderForm"
          :model="blackOrderForm"
          label-position="left"
          label-width="120px"
        >
          <el-form-item required label="拉黑原因">
            <el-input
              type="textarea"
              :rows="6"
              v-model="blackOrderForm.name1"
              placeholder="请输入拉黑原因"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item>
          <el-button>取消</el-button>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          </el-form-item>-->
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="handleClean" type="text" size="normal">清空</el-button>
        <el-button @click="blackDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="blackDialogVisible = false">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SessionDialog from "@/components/items/SessionDialog";
import api from "@/api/api";
export default {
  name: "SessionItem",
  components: {
    SessionDialog
  },
  props: {
    sessionId: String,
    currentSession: Object
  },
  data() {
    return {
      msgContent: "",
      activeName: "1",
      personalCollapse: "1",
      publicCollapse: "1",
      isPersonal: true,
      keyword: "",
      putDialogVisible: false,
      putOrderForm: {
        name1: "",
        name2: "",
        name3: "",
        name4: "",
        name5: "",
        name6: "",
        name7: "",
        name8: "",
        name9: "",
        name10: ""
      },
      addDialogVisible: false,
      addOrderForm: {
        name1: "",
        name2: "",
        name3: "",
        name4: "",
        name5: "",
        name6: "",
        name7: "",
        name8: "",
        name9: ""
      },
      transferDialogVisible: false,
      transferOrderForm: {
        name1: "",
        name2: "",
        name3: ""
      },
      blackDialogVisible: false,
      blackOrderForm: {
        name1: ""
      },
      webSocket: null,
      messageList: [],
      messageNum: 0,
      currentVisitor: {},
      isLoading: false
    };
  },
  watch: {
    sessionId() {
      this.handleCreateWS(this.sessionId);
      this.getSessionMessage();
      this.handleGetVisitor();
    }
  },
  computed: {},
  methods: {
    closeSession() {
      this.$confirm("确定要结束当前会话吗?", "结束会话确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.closeWebSocket();
        this.removeSession();
      });
    },
    removeSession() {
      api
        .updateSessionAPI({
          sessionId: this.sessionId,
          active: false
        })
        .then(res => {
          let { error, data } = res.data;
          if (error) {
            this.$message.error(data);
          } else {
            this.$emit("removeSession", this.sessionId);
          }
        });
    },
    getDetail() {
      this.$router.push("/order/detail");
    },
    handleGetVisitor() {
      api.getVisitorAPI(this.currentSession.visitorIp).then(res => {
        let { error, data } = res.data;
        if (error) {
          this.$message.error(data);
        } else {
          this.currentVisitor = data;
        }
      });
    },
    handleSendMessage() {
      if (this.msgContent != "") {
        this.webSocket.send(
          JSON.stringify({
            content: this.msgContent
          })
        );
        this.msgContent = "";
      } else {
        this.$message({
          message: "消息不能为空",
          type: "warning"
        });
      }
    },
    handleCreateWS(sessionId) {
      if (this.$store.getters.isWebSocketExist(sessionId)) {
        this.webSocket = this.$store.getters.getWebSocket(sessionId);
      } else {
        this.webSocket = new WebSocket(
          `ws://localhost:8080/session/${sessionId}/customer-service/message`
        );
        this.webSocket.onopen = this.setOnOpen;
        this.webSocket.onmessage = this.setOnMessage;
        this.webSocket.onerror = this.setOnError;
        this.webSocket.onclose = this.setOnClose;
        this.$store.commit("setWebSocket", {
          sessionId,
          webSocket: this.webSocket
        });
      }
    },
    setOnError() {
      this.$message.error("会话连接失败");
    },
    setOnOpen() {
      this.$message({
        message: "会话连接成功",
        type: "success"
      });
    },
    setOnMessage(event) {
      this.messageList.push(JSON.parse(event.data).data);
    },
    setOnClose() {
      // this.$message({
      //   message: "会话连接关闭",
      //   type: "warning"
      // });
    },
    closeWebSocket() {
      this.webSocket.close();
    },
    getSessionMessage() {
      this.isLoading = true;
      api.getSessionMessageAPI(this.sessionId).then(res => {
        this.isLoading = false;
        let { error, data } = res.data;
        if (error) {
          this.$message.error(data);
        } else {
          this.messageNum = data.total;
          this.messageList = data.page;
        }
      });
    },
    handleScrollBottom() {
      let ele = document.getElementById("dialogContainer");
      ele.scrollTop = ele.scrollHeight;
    }
  },
  created() {
    this.handleCreateWS(this.sessionId);
  },
  mounted() {},
  updated() {
    this.handleScrollBottom();
  }
};
</script>

<style scoped>
.session-item-style {
  background-color: #fff;
  border-radius: 5px;
  height: 88vh;
  width: 100%;
}
.top-item-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #e6f1ff;
}
.bottom-item-group {
  display: flex;
}
.top-session-title {
  font-size: 20px;
}
.top-button-group {
  width: 400px;
  display: flex;
  justify-content: space-evenly;
}
.top-button-style {
  font-size: 16px;
  color: #409eff;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.top-button-style:hover {
  color: #0368ec;
}
.button-icon-style {
  font-size: 25px;
  font-weight: 550;
  display: block;
}
.left-msg-group {
  width: 50vw;
  border-right: 1px solid #e4e7ed;
}
.left-top-group {
  width: 100%;
  height: 55vh;
  background-color: #f9f9f9;
  overflow: scroll;
}
.left-bottom-send {
  margin: 0 10px;
  float: right;
}
.left-bottom-item {
  padding: 10px 20px 0;
}
.bottom-item-style {
  color: gray;
  font-size: 30px;
  padding: 0 5px;
}
.right-info-group {
  padding: 0 20px;
  display: flex;
  justify-content: center;
}
.el-textarea__inner {
  outline: none;
  border: none;
  font-size: 15px;
}
.info-item-group {
  padding: 0 10px;
}
.info-title {
  font-size: 16px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info-label {
  font-size: 13px;
  color: #cfcfcf;
  display: inline-block;
  width: 80px;
}
.info-item {
  color: #4b4a4a;
  padding: 3px 0;
  font-size: 13px;
}
.info-bottom-group {
  margin-top: 15px;
}
.word-search-group {
  padding: 10px 0;
}
.bottom-link-group {
  padding: 20px 0;
}
.add-dialog-style {
  height: 440px;
  overflow: auto;
  padding: 20px 0 10px 20px;
  margin-top: 10px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}
.transfer-dialog-style {
  height: 250px;
  padding: 20px;
  margin-top: 10px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}
.black-dialog-style {
  height: 150px;
  padding: 20px;
  margin-top: 10px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}
</style>
<style>
.el-tabs__item {
  margin-bottom: 10px;
}
.el-tabs__nav-wrap::after {
  height: 0.5px;
}
</style>

